<template>
<!--  上传组件图片显示-->
  <el-upload
      :class="{'upload-img-btn-hide':hideUploadEdit || props.fileList.length >= props.limit, 'upload-img-btn-disabled': props.disabled }"
      list-type="picture-card"
      :limit="props.limit"
      v-if="props.styleType == 'img'"
      :action="requestUrl"
      :data="requestData"
      :accept='props.acceptType'
      :multiple="props.multiple"
      :disabled="props.disabled"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeAvatarUpload"
      :file-list="props.fileList">
    <el-icon><Plus /></el-icon>
  </el-upload>
<!--  上传组件按钮显示-->
  <el-upload v-else
     :limit="props.limit"
     :data="requestData"
     class="upload-demo"
     :action="requestUrl"
     :accept='props.acceptType'
     :multiple="props.multiple"
     :disabled="props.disabled"
     :file-list="props.fileList"
     :on-success="handleSuccess">
    <el-button class="el-button zs-btn-rectangle" :disabled="props.disabled">
      <el-icon class="el-icon"><Upload /></el-icon>
      上传文件
    </el-button>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" alt="Preview Image" class="upload-img-full" />
  </el-dialog>
</template>

<script setup>
import { ref,watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const hideUploadEdit = ref(false)
const requestUrl = ref(`${process.env.VUE_APP_BASE_API_ZK}${props.uploadApi}`)

/**
 * 定义数据
 * requestUrl 请求 URL
 * acceptType 接受上传的文件类型
 * styleType 上传的显示样式 img是图片，button是按钮
 * multiple  是否支持多选文件
 * disabled  是否支禁止上传
 * uploadFolder  文件保存的路径
 * uploadApi  上传的接口
 */
const props = defineProps({
  acceptType: { type: String },
  styleType: { type: String },
  multiple: { type: Boolean },
  disabled: { type: Boolean },
  fileList: { type: Array },
  limit:{ type: Number },
  uploadFolder: { type: String, default: '1'},
  uploadApi: { type: String, default: '/nxcloud-resource/res/upload'}
})
// 监听文件列表数据变化时更新组件隐藏状态
watch(()=>props.fileList,(newVal)=>{
  imgBtnVisibility(newVal)
})
const requestData = ref({
  folder: props.uploadFolder == '1' ?  `/DEFAULT/${props.styleType == 'img' ? 'image' : 'attachment'}` : props.uploadFolder
})

const emit = defineEmits(['handleUpload','handleRemove'])
// 上传成功通知子组件
const handleSuccess = (res, file, fileList) => {
  console.log(res, file, fileList)
    if (res.code === 0 || res.code === 200) {
      emit('handleUpload', res.data.res ? res.data.res : res.data)
      imgBtnVisibility(fileList)
    } else {
      ElMessage({
        showClose: true,
        message: file.name + '上传失败',
        type: 'error',
      })
    }

}
const handleRemove = (file, fileList) => {
  imgBtnVisibility(fileList)
  console.log(file)
  if (file.size / 1024 / 1024 > 10) {
    return false;
  }
  if (file.response) {
    file.url = file.response.data.res.url
  }
  emit('handleRemove',file)
}
const handlePictureCardPreview = (file) => {
  dialogVisible.value = true
  dialogImageUrl.value = file.url
}
// 图片上传大小 不超过10M
const beforeAvatarUpload = (rawFile) => {
  // 添加图片上传手动判断
  if (props.styleType == 'img' && rawFile.type.indexOf('image') == -1) {
    ElMessage.error('只能上传图片!')
    return false
  }
  // 更改上传参数
  // requestData.value.folder = `/DEFAULT/${props.styleType == 'img' ? 'image' : 'attachment'}`
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('最大不能超过 10MB!')
    return false
  }
  return true
}

const imgBtnVisibility = (fileList) => {
  if(props.limit > 0 && fileList.length >= props.limit) {
    hideUploadEdit.value = true
  }else {
    hideUploadEdit.value = false
  }
}
</script>
<style  lang="scss">

.upload-img-full{
  width: 100%;
}
.el-upload-list__item{
  line-height: 25px;
}
.el-upload-list__item-file-name{
  overflow-y: visible;
}

.upload-img-btn-disabled {
  .el-upload--picture-card {
    border: 1px dashed #cdd0d6;
    cursor: no-drop;
  }
}
.upload-img-btn-hide {
  .el-upload--picture-card {
    display: none;
  }
  .el-icon--close-tip{
    display: none !important;
  }
}
</style>